<template>
  <div class="map-body" id="map_play"></div>
</template>
<script setup>
  import { nextTick, onMounted } from 'vue';
  import MapJS from '/@/views/monitor/components/map/js/index.js';
  import MethodsJS from '/@/views/monitor/components/map/js/methods.js';
  import DrawJS from '/@/views/monitor/components/map/js/draw.js';
  import { api as areaApi } from '/@/api/plat/area.js';

  const props = defineProps({
    alarmInfo: {
      type: Object,
      default: () => {},
    },
  });

  let mapTarget = null;
  let MapConfig = {
    center: [119.45206246145788, 29.17467466774048],
    zoom: 15,
    EPSGCode: 'EPSG:3857',
    mapZIndexLimit: [14, 18],
    shipZoomLimit: [12, 16],
    target: 'map_play', // 元素节点
  };

  // 初始化海图
  const initMainMap = () => {
    mapTarget = MapJS.initMap(MapConfig);
    MapJS.initGraticule(mapTarget);
    // initMapMethod(mapTarget);
    // 绘制区域
    drawArea();
  };

  // 获取区域并绘制
  function drawArea() {
    areaApi.getDetailById(props.alarmInfo.areaId).then(({ data }) => {
      DrawJS.drawArea(mapTarget, [data]);
    });
  }

  function startPlay(pointList) {
    DrawJS.drawPointsTravel(mapTarget, pointList, 'Points_Travel');
  }

  function moveToStartPoint(row) {
    // moveToCenterByLonAndLat([row.longitude, row.latitude], mapTarget, 15);
  }
  onMounted(() => {
    nextTick(() => {
      initMainMap();
    });
  });

  defineExpose({
    startPlay,
    moveToStartPoint,
  });
</script>

<style lang="less" scoped>
  #map_play {
    width: 100%;
    height: 100%;
    background-color: #99b3cc;
  }
</style>
